<template>
  <div class="device_warning">
    <div id="deviceWarningChar"
         style="width:100%;height:100%"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import ECharts from 'vue-echarts'
export default {
  components: {
    ECharts
  },
  props: {
    newDate: {
      type: Date,
      default: ''
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    newDate(e) {
      this.chart.resize()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    initData() {
      this.$get('console/api/v1/cockpit/alarmTypeWeek', {}).then(r => {
        const data = r.data.data
        const xData = data[1].time
        const series = []
        const legendData = []
        for (const item in data[0]) {
          legendData.push(item)
          series.push({
            label: item,
            value: data[0][item]
          })
        }
        this.init(xData, series)
      })
    },
    init(xData, series) {
      //
      xData = ['8-18', '8-19', '8-20', '8-21', '8-22', '8-23', '8-24']
      series = [
        { label: '火警报警', value: [13, 10, 3, 12, 15, 30, 7] },
        { label: '电器火灾报警', value: [5, 12, 11, 4, 25, 16, 1] },
        { label: '天然气报警', value: [9, 2, 5, 14, 15, 6, 16] }
      ]
      this.chart = echarts.init(document.getElementById('deviceWarningChar'))
      const seriesList = []
      const color = [
        '#fe9a8b',
        '#9E87FF',
        '#80ffa5',
        '#fcfe8b',
        '#8bcefe',
        '#8bfef9',
        '#dc8bfe',
        '#fe8b8b',
        '#ff0000',
        '#ffff00',
        '#0000ff',
        '#008000',
        '#00ffe7',
        '#5600ff',
        '#fb00ff'
      ]
      series.forEach((e, i) => {
        const data = this.initSeriesOption(
          e.label,
          e.value,
          color[i],
          color[i] + 'b3',
          color[i] + '03'
        )
        seriesList.push(data)
      })
      // let data1 = [13, 10, 3, 12, 15, 30, 7]
      // let series1 = this.initSeriesOption('火警报警', data1, '#fe9a8b', '#fe9a8bb3', '#fe9a8b03')

      // let data2 = [5, 12, 11, 4, 25, 16, 1]
      // let series2 = this.initSeriesOption('电器火灾报警', data2, '#9E87FF', '#9E87FFb3', '#9E87FF03')

      // let data3 = [9, 2, 5, 14, 15, 6, 16]
      // let series3 = this.initSeriesOption('天然气报警', data3, '#80ffa5', '#80ffa5b3', '#80ffa503')

      // let xData = //['8-18', '8-19', '8-20', '8-21', '8-22', '8-23', '8-24']
      const option = {
        legend: {
          // data: legendData,
          icon: 'circle',
          textStyle: {
            color: '#fff',
            fontSize: '20px'
          },
          // 重写legend显示样式
          formatter: name => {
            // 获取legend显示内容
            const data = option.series.filter(x => x.name === name)[0].data
            const total = eval(data.join('+'))
            return name + ' ' + total + '次'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '5%',
          bottom: '16%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#fff'
              },
              margin: 15
            },
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: seriesList // [series1, series2, series3]
      }
      this.chart.setOption(option, true)
    },
    initSeriesOption(name, data, color, color1, color2) {
      return {
        name: name,
        type: 'line',
        data: data,
        symbolSize: 6,
        symbol: 'circle',
        smooth: true,
        lineStyle: {
          color: color
        },
        itemStyle: {
          normal: {
            color: color,
            borderColor: color
          }
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: color1
            },
            {
              offset: 1,
              color: color2
            }
          ])
        },
        emphasis: {
          itemStyle: {
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0,
                  color: color
                },
                {
                  offset: 0.4,
                  color: color
                },
                {
                  offset: 0.5,
                  color: '#fff'
                },
                {
                  offset: 0.7,
                  color: '#fff'
                },
                {
                  offset: 0.8,
                  color: '#fff'
                },
                {
                  offset: 1,
                  color: '#fff'
                }
              ]
            },
            borderColor: color,
            borderWidth: 2
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.device_warning {
  width: 100%;
  height: 100%;
}
</style>
